<template>
    <div class="box">
        <div class="boxtop">
            <back></back>
            <p>烘焙百科</p>
        </div>
        <div class="content" v-for="(v,i) in arr" :key="i" @click="xiangqing(v.courseId)">
            <div><img :src="v.image" alt=""/></div>
            <p>{{v.title}}</p>
        </div>
    </div>
</template>
<script>
import back from '../../backcon'
export default {
    components:{back},
    data() {
        return {
            arr:[],
           
        }
    },
    methods:{
        getallinfo:function(){
           this.axios({
            url:"https://api.hongbeibang.com/education/getNewbieGuide?type=5&_t=1584778602256&csrfToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOjAsImV4cCI6MTc3MTU2NjMxNCwiaWF0IjoxNTgyMTc3NTE0fQ.iBmGtQ0fasTTaSuApywmN6Ms0aNYwUvkGLoXX6V6hO8",
            method:"get",
            params: {
               
            }
           }).then((ok)=>{
               this.arr=ok.data.data.courseGuide
               //window.console.log(this.arr)
           })    
        },
        xiangqing(e){
            window.console.log(e)
            this.$router.push({
               path:"/hbbkXQ",
               query:{
                   courseId:e
               }
            })
        }
    },
    created(){this.getallinfo()}
}
</script>
<style scoped>
    .box{width: 90%;margin: .2rem auto}
    .boxtop{display: flex;align-items: center}
    .boxtop p{font-size: .2rem;font-weight: bold;width: 100%;text-align: center}
    .content{display: flex;}
    .content img{width:1.5rem}
    .content p{margin-left: .2rem}
</style>